<template>
  <div>
    <!-- 精选题库组件 -->
         <el-alert :closable="false" type="info">
            <div class="left">
              <i class="el-icon-info"></i>
              <span>数据一共 {{list.length}} 条</span>
            </div>
          </el-alert>
          <el-table :data="list" style="width: 1880px">
            <el-table-column label="试题编号" prop="number" width="150"></el-table-column>
            <el-table-column label="学科" prop="subject" width="120"></el-table-column>
            <el-table-column label="目录" prop="catalog" width="120"></el-table-column>
            <el-table-column label="题型" prop="questionType" width="120" :formatter="formatterQu"></el-table-column>
            <el-table-column label="题干" prop="question"  width="300">
            <template slot-scope="scope">
              <div v-html="scope.row.question"></div>
            </template>
            </el-table-column>
            <el-table-column label="录入时间" prop="addDate" width="150">
                <template #default="{row}">
                <span>{{row.addDate | parseTimeByString}}</span>
                </template>
            </el-table-column>
            <el-table-column label="难度" prop="difficulty" width="120" :formatter="formatterDi"></el-table-column>
            <el-table-column label="录入人" prop="creator" width="120"></el-table-column>
            <el-table-column label="审核状态" prop="chkState" width="120" :formatter="formatterCh"></el-table-column>
            <el-table-column label="审核意见" prop="chkRemarks" width="120"></el-table-column>
            <el-table-column label="审核人" prop="chkUser" width="120"></el-table-column>
            <el-table-column label="发布状态" prop="publishState" width="120" :formatter="formatterPu"></el-table-column>
            <el-table-column fixed="right" label="操作" width="190">
              <template slot-scope="scope"   >
                <el-button @click.prevent="preview(scope.row)" size="small" type="text">预览</el-button>
                <el-button @click.prevent="audit(scope.row)" :disabled="scope.row.chkState !== 0 ? true:false" size="small" type="text">审核</el-button>
                <el-button @click.prevent="amend(scope.row)" :disabled="scope.row.publishState === 1" size="small" type="text">修改</el-button>
                <el-button @click.prevent="putaway(scope.row)" size="small" type="text">{{scope.row.publishState ===1 ? '下架' :'上架'}}</el-button>
                <el-button @click.prevent="remove(scope.row)" :disabled="scope.row.publishState === 1" size="small" type="text">删除</el-button>
              </template>
            </el-table-column>
             </el-table>
  </div>
</template>

<script>
// , remove

import { questionType, chkType, publishType, difficulty } from '../../api/hmmm/constants'
import { update, choicePublish } from '../../api/hmmm/questions'
export default {
  props: ['total', 'list', 'dialogFormVisible', 'listitem'],
  data () {
    return {
      questionType,
      chkType,
      publishType,
      difficulty,
      putawaytext: '上架'
    }
  },
  created () {
    // console.log('list"', this.list)
  },
  methods: {
    // 枚举精选题型
    formatterQu (row) {
      // 判读枚举值是否和后台返回的值是否相等的方式来将数字转换成对应的内容
      const obj = this.questionType.find(item => item.value === Number(row.questionType))
      return obj.label
    },
    // 枚举精选难度
    formatterDi (row) {
      const obj = this.difficulty.find(item => item.value === Number(row.difficulty))
      return obj?.label || ''
    },
    // // 枚举精选审核状态
    formatterCh (row) {
      const obj = this.chkType.find(item => item.value === Number(row.chkState))
      return obj?.label || ''
    },
    // // 枚举精选发布状态
    formatterPu (row) {
      const obj = this.publishType.find(item => item.value === Number(row.publishState))
      return obj.label
    },
    // 预览
    preview (item) {
      this.$emit('update:showExamination', true)
      this.$emit('setListItem', item)
    },
    // 审核
    audit (item) {
      this.$emit('update:dialogFormVisible', !this.dialogFormVisible)
      this.$emit('update:listitem', item)
    },
    // 修改
    async amend (item) {
      await update(item)
      await this.$router.push(`/questions/new?id=${item.id}`)
    },
    // 上架
    async putaway (item) {
      // item.publishState === 1    时上架成功 并禁用 修改按钮
      // item.publishState === 0    时下架成功 不禁用 修改按钮
      try {
        if (item.publishState === 1) {
          const res = await this.$confirm('您确认下架这道题目吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })

          if (res === 'confirm') {
            item.publishState = 0
          }
          item.publishType = '2'
          await choicePublish(item)
          return this.$message.success('下架成功')
        } else {
          const res = await this.$confirm('您确认上架这道题目吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          if (res === 'confirm') {
            item.publishState = 1
          }
          item.publishType = '1'
          await choicePublish(item)
          return this.$message.success('上架成功')
        }
      } catch (error) {
        console.log(error)
      }
    }, // 删除当前这一例 触发父组件的函数
    remove (row) {
      this.$emit('remove', row)
    }

  }
}
</script>

<style>

</style>
